<template>
    <div class="cartcontrol">
        <transition name="move">
            <div class="cart-remove" v-show="food.count>0" @click.stop.prevent="removeCart">
                <i class="inner icon-remove_circle_outline"></i>
            </div>
        </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
    </div>
</template>

<script>
import Vue from 'vue';

export default {
    name: 'cartcontrol',
    props: {
        food: {
            type: Object
        }
    },
    methods: {
        addCart(event) {
            if (!event._constructed) {
                return;
            }
            if (!this.food.count) {
                // this.food.count = 1;
                Vue.set(this.food, 'count', 1);
            } else {
                this.food.count += 1;
            }
            this.$emit('add', event.target);
        },
        removeCart(event) {
            if (!event._constructed) {
                return;
            }
            this.food.count--;
        }
    }
}
</script>

<style lang="less" scoped>
.cartcontrol {
    font-size: 0;
    .cart-add {
        display: inline-block;
        // vertical-align: top;
        font-size: 24px;
        line-height: 24px;
        color: rgb(0, 160, 220);
        padding: 6px;
    }
    .cart-count {
        display: inline-block;
        vertical-align: top;
        font-size: 10px;
        line-height: 24px;
        width: 12px;
        padding-top: 6px;
        text-align: center;
        color: rgb(147, 153, 159);
    }
    .cart-remove {
        display: inline-block; 
        // vertical-align: top;
        padding: 6px;
        opacity: 1;
        .inner {
            display: inline-block;
            font-size: 24px;
            line-height: 24px;
            color: rgb(0, 160, 220);
        }
        &.move-enter-active,
        &.move-leave-active {
            transition: all 0.4s linear;
            .inner{
                transition: all 0.4s linear;
            }
        }
        &.move-enter,
        &.move-leave-to {
            opacity: 0;
            //translate3d而不是translate 主要是为了开启硬件加速
            transform: translate3d(24px, 0, 0);
            .inner {
                transform: rotate(180deg);
            }
        }
    }
}
</style>
